<template>
  <div class="banner-carousel" v-if="banners.length > 0">
    <Carousel
      autoplay
      :autoplay-speed="3000"
      :dots="true"
      :effect="'fade'"
      arrows
      class="banner-carousel-container"
    >
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
          <LeftCircleOutlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <RightCircleOutlined />
        </div>
      </template>
      
      <div
        v-for="banner in banners"
        :key="banner._id"
        class="banner-item"
        @click="handleBannerClick(banner)"
      >
        <img
          :src="banner.imageUrl"
          :alt="banner.title"
          class="banner-image"
          @error="handleImageError"
        />
        <div class="banner-overlay">
          <h3 class="banner-title">{{ banner.title }}</h3>
        </div>
      </div>
    </Carousel>
    <!-- 无轮播图时的占位
    <div v-else class="banner-placeholder">
      <Empty description="暂无轮播图" />
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Carousel, Empty, message } from 'ant-design-vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
import bannerAPI from '~/api/banner'

// Props
const props = defineProps({
  // 可以添加一些配置项
})

// Emits
const emit = defineEmits(['banner-click'])

// 响应式数据
const banners = ref([])
const loading = ref(false)

// 获取轮播图数据
const fetchBanners = async () => {
  try {
    loading.value = true
    const res = await bannerAPI.getActiveBanners()
    banners.value = res.data || []
  } catch (error) {
    console.error('获取轮播图失败:', error)
    // 静默处理错误，不影响页面其他功能
  } finally {
    loading.value = false
  }
}

// 处理轮播图点击
const handleBannerClick = (banner) => {
  if (banner.linkUrl) {
    // 如果有跳转链接，在新窗口打开
    window.open(banner.linkUrl, '_blank')
  }
  // 触发事件，让父组件可以处理
  emit('banner-click', banner)
}

// 处理图片加载错误
const handleImageError = (event) => {
  // 设置默认图片或隐藏图片
  event.target.style.display = 'none'
}

// 初始化
onMounted(() => {
  fetchBanners()
})
</script>

<style scoped lang="scss">
.banner-carousel {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
  .banner-carousel-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    :deep(.slick-dots) {
      bottom: 16px;
      
      li {
        button {
          background: rgba(255, 255, 255, 0.5);
          border-radius: 50%;
          width: 8px;
          height: 8px;
        }
        
        &.slick-active button {
          background: #fff;
        }
      }
    }
    
    :deep(.slick-arrow.custom-slick-arrow) {
      width: 35px;
      height: 35px;
      font-size: 35px;
      color: #fff;
      background-color: rgba(31, 45, 61, 0.11);
      transition: ease all 0.3s;
      opacity: 0.3;
      z-index: 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    :deep(.slick-arrow.custom-slick-arrow:before) {
      display: none;
    }
    
    :deep(.slick-arrow.custom-slick-arrow:hover) {
      color: #fff;
      opacity: 0.8;
      background-color: rgba(31, 45, 61, 0.3);
    }
  }
  
  .banner-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    
    &:hover {
      .banner-overlay {
        opacity: 1;
      }
    }
  }
  
  .banner-image {
    width: 100%;
    // object-fit: cover;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
  
  .banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .banner-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
  }
  
  .banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px dashed #d9d9d9;
  }
}
</style> 